import * as echarts from '../../../../ec-canvas/echarts';
import {
  countS,
  colorTwo
} from '../../../../utils/util.js';
import colorObj from '../../../../utils/colorList.js'
const systemInfo = wx.getSystemInfoSync();

Component({
  properties: {
    sign: {
      type: String
    }
  },

  data: {
    ec: {
      lazyLoad: true
    },
    tipShow: false,
    tipX: 100,
    tipY: 100,
    tipArr: [],
    xAxisTime: ''
  },
  ready() {},
  pageLifetimes: {

  },
  methods: {
    countEcharts(data, isDay) {
      this.setData({
        tipShow: false
      })
      let mychart = this.selectComponent('#mychart-dom-bar');
      mychart.init((canvas, width, height) => {
        const Chart = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        Chart.setOption(this.getCategoryOption(data, isDay))
        Chart.getZr().on('click', params => {
          const pointInPixel = [params.offsetX, params.offsetY];     
          if (Chart.containPixel('grid', pointInPixel)) {
            let pointInGrid = Chart.convertFromPixel({ seriesIndex: 0 }, pointInPixel)
            // x轴数据的索引值
            let xIndex = pointInGrid[0]
            // 获取图表的option
            let op = this.getCategoryOption(data, isDay)
            let xAxisTime = op.xAxis.data[xIndex]
            // 自定义当前tooltip
            let tipArr = []
            op.series.forEach(item => {
              tipArr.push(item.name + ': ' + item.data[xIndex].toFixed(2))
            })
            this.setData({
              tipShow: true,
              xAxisTime,
              tipX: (params.offsetX - 100) < 0 ? 0 : params.offsetX - 100,
              tipY: params.offsetY,
              tipArr
            })
          }
        })
        return Chart
      })
    },

    // 配置柱状图
    getCategoryOption(data, isDay) {
      let legend = [],
        colorList = [],
        series = [],
        xAxisData = [],
        moduleConfig = wx.getStorageSync('moduleConfig'),
        stack = moduleConfig.health && moduleConfig.health.stack || false,
        maxTime = [],
        result = data.result,
        username = wx.getStorageSync('username')
      for (let key in result.runtime) {
        legend.push(key);
        colorList.push(colorObj[key]);
        maxTime.push(Math.max(...result.runtime[key]))
        series.push({
          name: key,
          type: 'bar',
          stack: 2,
          barGap: '70%',
          barWidth: '7.5',
          label: {
            normal: {
              position: 'insideRight'
            }
          },
          itemStyle: {
            color: colorList[colorList.length - 1]
          },
          data: isDay ? countS(result.runtime[key], 3600) : countS(result.runtime[key], 60)
        })
      }
      let signBool = this.properties.sign,
        labels = [];
      result.labels.forEach(item => {
        labels.push(signBool == 1 && item.split(' ')[1] || item)
        let _D = item.split(' ')[1].split(':');
        _D.pop()
        xAxisData.push(_D.join(':'))
      })
      let sign = true;
      let maxT = Math.max(...maxTime) / 3600;
      if (isDay) {
        maxT > 1 && maxT <= 24 &&
          (
            isDay = false,
            sign = false
          );

        maxT < 1 && (
          isDay = false,
          sign = false
        )
      } else {
        (maxT > 1) && (sign = false)
      }


      return {
        animation: false,
        legend: {
          data: legend,
          itemWidth: 10.5,
          itemHeight: 7.5,
          textStyle: {
            color: colorList,
            fontSize: 9,
          }
        },
        // tooltip: {
        //   trigger: 'axis',
        //   confine: true,
        //   formatter: function (params) {
        //     let result = params[0].name;
        //     params.forEach(function (item) {
        //       if ((!item.data && typeof(item.data) != 'undefined' && item.data != 0) || typeof(item.data) === 'undefined') {
        //         result += "\n" + item.seriesName + ": " + '--';
        //       } else {
        //         result += "\n" + item.seriesName + ": " + item.data.toFixed(2)
        //       }
        //     });
        //     return result;
        //   }
        // },  
        grid: {
          top: 24,
          left: 50,
          right: 30,
          bottom: 26,
          height: systemInfo.windowWidth <= 360 && 85 || 110
        },
        xAxis: {
          name: '时间',
          animation: false,
          nameGap: 5.5,
          type: 'category',
          data: labels,
          splitLine: {
            show: false
          },

          nameTextStyle: {
            color: "#BAD7FF",
            fontSize: 12,

          },
          axisLabel: {
            margin: 10,
            color: "#BAD7FF",
            fontSize: 9,
            // interval: 1
          },
          axisLine: {
            lineStyle: {
              color: {
                type: 'linear',
                colorStops: [{
                  offset: 0,
                  color: '#39529A'
                }, {
                  offset: 1,
                  color: '#39529A' // 100% 处的颜色
                }],
              }
            }
          },
        },
        yAxis: {
          type: 'value',
          name: isDay && "天" || (sign && "分钟" || "小时"),
          nameGap: 5.5,
          min: 0,
          // max: 8,
          splitLine: {
            show: false
          },

          nameTextStyle: {
            color: "#BAD7FF",
            fontSize: 12,
          },
          axisLabel: {
            margin: 10,
            color: "#BAD7FF",
            fontSize: 9,
            formatter(val) {
              let value = isDay && (val / 24) || (sign && val || val);
              return Math.floor(value * 10) / 10
            }
          },
          axisLine: {
            lineStyle: {
              color: {
                type: 'linear',
                colorStops: [{
                  offset: 0,
                  color: '#39529A'
                }, {
                  offset: 1,
                  color: '#39529A' // 100% 处的颜色
                }],
              }
            }
          },
        },
        series: series
      }
    }
  }
})